<template>
    <div class="container">
        <div class="headerimg">
            <img v-if="database.frontImage ==null && database.frontImage == ''" src="@/assets/11.jpg" style="width: 100%; height: 100%;">
            <img v-else :src="database.frontImage" style="width: 100%; height: 100%;">
            <div class="title1">
                <span>欢</span>
                <span>迎</span>
                <span>来</span>
                <span>到</span>
                <span>详</span>
                <span>情</span>
                <span>页</span>
            </div>        
        </div>
        <div class="middle" :style="{backgroundImage: 'url(' + (database.backgroundImage ? database.backgroundImage : this.baseImg) + ')'}">
            <div class="content">
                <div class="lefcontent">
                    <div class="title">
                        <h3 v-if="database.title == '' || database.title == null">三体声音科技中国民乐系列 + 金属吉他 + 效果器双十一促销来来来！</h3>
                        <h3 v-else>{{ database.title }}</h3>
                        <div style="display: flex; margin-top: 20px;justify-content: center;">
                            <div class="time" style="margin-right: 20px;">
                                <span style="width: 120px;">发布时间：</span>
                                <span v-if="database.createTime == null || database.createTime == ''">2023-10-03</span>
                                <span v-else>{{ database.createTime }}</span>
                            </div>
                            <div style="margin-left: 20px;">
                                <span>作者：</span><span>{{ database.user.username }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="message" style="padding: 20px 50px;">
                        <div v-if="this.database.content == '' || this.database.content == ''">

                        </div>
                        <div v-else>
                            <div v-html="this.database.content"></div>
                        </div>
                    </div>
                    <div class="comment">
                        <div class="commtitl">
                            <h3 style="height: 60px; line-height: 60px;margin-left: 40px;">文章评论</h3>
                        </div>
                        <div class="MidComm">
                            <textarea v-model="content" placeholder="评论内容" rows="10">
                            </textarea>
                            <el-button type="success" style="position: absolute;right: 10px;bottom: 10px;"
                            @click="SubmitComment()">评论</el-button>
                        </div>
                        <div style="margin-bottom: 20px;">
                            <Comment :isShow="isShow" v-model="replyComment" @subComment="subComment"
                            :dataComment="dataComment" @deleteComment="deleteComment"
                            @SubmitComment="SubmitComment"></Comment>
                        </div>
                    </div>
                </div>
                <div class="righcontent">
                    <div style="width: 100%;margin-top: 15px;">
                        <PersonInfo></PersonInfo>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PersonInfo from '@/components/Front/PersonInfo/index.vue'
import Comment from '@/components/Comment/index.vue'
import { mapState, mapMutations } from 'vuex'
export default {
    components:{
        PersonInfo,
        Comment
    },
    data(){
        return{
            database:[],
            baseImg:'',
            Comment:{
                parentId:'',
                rootId:'',
                content:'',
                userId:'',
                id:'',
                commType:1,
                commTargetId:'',
                toCommUserId:''
            },
            content:'',
            replyComment:'',
            dataComment:[],
            isShow:-5,
        }
    },
    methods:{
        async SubmitComment(){
            this.Comment.commType = 1
            this.Comment.commTargetId = this.database.id
            if(this.replyComment == '' || this.replyComment == null){
                this.Comment.content = this.content
            }
            else{
                this.Comment.content = this.replyComment
            }
            const res = await this.$axios.post("Comment/SaveComment",this.Comment)
            console.log("res="+res)
            if(res.code == "200"){
                this.$message.success(res.msg)
            }
            else{
                this.$message.error(res.msg)
            }
            this.replyComment = ''
            this.content = ''
            this.isShow = -5
            Object.keys(this.Comment).forEach(key => (this.Comment[key] = ''))
            this.getComment()
        },

        async deleteComment(val){
            this.Comment.commType = 1
            this.Comment.content = val.content
            this.Comment.id = val.id
            this.Comment.rootId = val.rootId
            this.Comment.parentId = val.parentId
            this.Comment.commTargetId = this.database.id
            const res = await this.$axios.post("Comment/DeleteComment",this.Comment)
            if(res.code == "200"){
                this.$message.success(res.msg)
                this.getComment()
            }
            else{
                this.$message.error("删除失败")
            }
        },

        subComment(obj){
            if(this.isShow != -5){
                this.replyComment = ''
                this.isShow = -5
                this.Comment.rootId = ''
                this.Comment.parentId = '',
                this.Comment.content = '',
                this.Comment.id = ''
                this.Comment.userId = '',
                this.toCommUserId = ''
                console.log("++++++++++++++++")
                return
            }
            else{
                if(obj.rootId == -1){
                    this.isShow = obj.id
                    this.Comment.rootId = obj.id
                }
                else{
                    this.isShow = obj.rootId
                    this.Comment.rootId = obj.rootId
                }
                this.Comment.parentId = obj.id
                this.Comment.toCommUserId = obj.userId
            }
        },
        async getComment(){
            const res = await this.$axios.post(`Comment/getAllComment?commType=1&commTargetId=${this.database.id}`)
            this.dataComment = res
        }
    },
    computed:{
        ...mapState('editfo',['baseDate'])
    },
    created(){
        console.log("[[siiosjdidji]]")
        this.database = this.baseDate
        console.log(this.database)
        this.getComment()
    }
}
</script>

<style lang="less" scoped>
.headerimg{
    width: 100%;
    height: 560px;
    position: relative;
    .title1{
        position: absolute;
        left: 50%;
        top: 25%;
        color: aliceblue;
        font-size: 60px;
        transform: translateX(-50%);

        span{
            top:40px;
            position: relative;
            animation: loading 0.3s ease 0s infinite alternate;
            text-shadow:    0 1px 0  #CCC,
                            0 2px 0 #CCC,
                            0 3px 0 #CCC,
                            0 4px 0 #CCC,
                            0 5px 0 #CCC,
                            0 6px 0 #CCC,
                            0 7px 0 #CCC,
                            0 8px 0 #CCC,
                            0 9px 0 #CCC,
                            0 10px 10px rgba(0, 0, 0, 0.5);
        }
        span:nth-child(2) { 
            animation-delay: 0.1s; 
        }
        span:nth-child(3) { 
            animation-delay: 0.2s; 
        }
        span:nth-child(4) { 
            animation-delay: 0.3s; 
        }
        span:nth-child(5) { 
            animation-delay: 0.4s; 
        }
        span:nth-child(6) { 
            animation-delay: 0.5s; 
        }
        span:nth-child(7) { 
            animation-delay: 0.6s; 
        }
    }
}

.middle{
    position: relative;
    width: 100%;
    height:100% ;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    .content{
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        width: 90%;
        height: 100%;
        .lefcontent{
            width: calc(100% - 490px);
            height: 100%;
            .title{
                background-color: rgba(255,255,255,0.6);
                border-bottom: 1px solid black;
                text-align: center;
                height: 80px;
            }
            .message{
                background-color: rgba(255,255,255,0.6);
                margin-top: 20px;
            }
            .comment .commtitl{
                width: 100%; 
                height: 60px; 
                border-bottom: 1px solid black;
                background-color: rgba(255,255,255,0.6);
            }
            .comment .MidComm{
                position: relative;
                padding: 20px;
                height: 200px;
                background-color:rgba(255,255,255,0.6);
                textarea{
                    height: 100%;
                    width: 100%;
                    border: none;
                    background-color: transparent;
                    &:focus{
                        outline: none;
                    }
                }
                textarea::-webkit-input-placeholder{
                    font-size: 20px;
                }
            }
        }
        .righcontent{
            width: 460px;
            height: 100%;
        }
    }
}


@keyframes loading {  /* 定义动画*/
    100% {
      top: 5px;  /*字符上下浮动*/
      text-shadow: 0 1px 0 #CCC,
      0 2px 0 #CCC,
      0 3px 0 #CCC,
      0 4px 0 #CCC,
      0 5px 0 #CCC,
      0 6px 0 #CCC,
      0 7px 0 #CCC,
      0 8px 0 #CCC,
      0 9px 0 #CCC,
      0 50px 25px rgba(0, 0, 0, 0.3);     
  }
}
</style>